<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background: #61ac5a;
            overflow: hidden;
            cursor: none;
        }

        .sky {
            height: 300px;
            background: skyblue;
            position: relative;
        }

        .cloud {
            position: absolute;
            left: 20%;
            top: 100px;
            height: 50px;
            width: 50px;
            background: #fff;
            animation: cloudMove 2s linear infinite alternate;
        }

        .cloud:nth-child(2) {
            left: 50%;
            top: 70px;
            height: 50px;
            width: 50px;
            background: #fff;
            transform: scale(.8);
            animation: cloudMove2 2.5s linear infinite alternate;
            opacity: .8;
        }

        .cloud p {
            position: absolute;
            border-radius: 50%;
            background: #fff;
        }

        .cloud p:nth-child(1) {
            left: -28px;
            top: -23px;
            width: 50px;
            height: 50px;
        }

        .cloud p:nth-child(2) {
            left: -42px;
            top: 0px;
            width: 70px;
            height: 60px;
        }

        .cloud p:nth-child(3) {
            left: 10px;
            top: -35px;
            width: 58px;
            height: 50px;
        }

        .cloud p:nth-child(4) {
            left: 46px;
            top: -25px;
            width: 60px;
            height: 60px;
        }

        .cloud p:nth-child(5) {
            left: 8px;
            top: 23px;
            width: 62px;
            height: 50px;
        }

        .cloud p:nth-child(6) {
            left: 46px;
            top: 4px;
            width: 79px;
            height: 61px;
        }

        .sun {
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            background: radial-gradient(circle, red, yellow);
            box-shadow: #ffa600 0 0 20px 0px;
            top: 10px;
            right: 100px;
            animation: sunshine .5s linear infinite alternate;
            filter: blur(1px);
        }

        @keyframes sunshine {
            to {
                box-shadow: #ffa600 0 0 40px 10px;
            }
        }

        @keyframes cloudMove {
            to {
                transform: translateX(8px);
            }
        }

        @keyframes cloudMove2 {
            to {
                transform: scale(.8) translateX(8px);
            }
        }

        .lawn {
            height: calc(100% - 300px);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 40px;
        }

        .hammer {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: bottom right;
        }

        .hammer img {
            width: 50px;
        }

        .row {
            height: 100px;
            width: 500px;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
        }

        .row img {
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="sky">
        <div class="cloud">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="cloud">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="sun"></div>
    </div>
    <div class="lawn"></div>
    <div class="hammer">
        <img src="./image/hammer.png" alt="">
    </div>
</body>
<script>
    var n = 3; //行
    var m = 3; //列
    var hammer = document.querySelector('.hammer');
    var lawn = document.querySelector(".lawn");
    for (let i = 0; i < n; i++) {
        let row = document.createElement('div');
        row.className = "row";
        lawn.appendChild(row);
    }
    var rows = document.querySelectorAll('.row');
    document.body.addEventListener('mousemove', function (e) {
        hammer.style.left = e.pageX - parseInt(getComputedStyle(hammer, null).width) / 2 + 'px';
        hammer.style.top = e.pageY - parseInt(getComputedStyle(hammer, null).height) / 2 + 'px';
    })
    hammer.addEventListener('mousedown', function () {
        this.style.transform = "rotate(-15deg)";
    })
    hammer.addEventListener('mouseup', function () {
        this.style.transform = "rotate(0)";
    })
    var arr = [];
    for (let i = 0; i < m; i++) {
        arr.push('<img src="./image/hole.png" alt="">');
    }
    for (let i = 0; i < rows.length; i++) {
        rows[i].innerHTML = arr.join('');
    }
    var holes = document.querySelectorAll('.row img');
    document.addEventListener('click', function (e) {
        for (let i = 0; i < holes.length; i++) {
            var x = e.pageX;
            var y = e.pageY;
            var holeLeft = holes[i].offsetLeft;
            var holeTop = holes[i].offsetTop;
            var holeWidth = holes[i].offsetWidth;
            var holeHeight = rows[0].offsetHeight;
            if (x >= holeLeft && x <= holeLeft + holeWidth && y >= holeTop && y <= holeTop + holeHeight) {
                holes[i].src = "./image/hole.png";
            }
        }
    })
    var t = setInterval(function () {
        let i = Math.floor(Math.random() * n);
        let j = Math.floor(Math.random() * m);
        rows[i].children[j].src = "./image/mouse.png"
    }, 100)
</script>

</html>